<template>
  <div class="login-container">
    <el-form class="login-form" ref="form" :model="user" :rules="rules">
      <h2 class="title">智慧物流后台管理系统</h2>

      <el-form-item prop="mobile">
        <el-input
          v-model="user.mobile"
          placeholder="请输入手机号码"
          prefix-icon="el-icon-phone"
        ></el-input>
      </el-form-item>

      <el-form-item prop="code">
        <el-input
          placeholder="请输入验证码"
          v-model="user.code"
          prefix-icon="el-icon-mobile"
        ></el-input>
      </el-form-item>

      <el-form-item prop="value">
        <el-checkbox v-model="user.value"
          >我已阅读并同意用户协议和隐私条款</el-checkbox
        >
      </el-form-item>

      <el-form-item>
        <el-button
          type="primary"
          @click="onLogin"
          class="login-btn"
          :loading="isLoading"
          >登录</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { GetLogin } from "@/services/user";

export default {
  name: "login",
  data() {
    return {
      user: {
        mobile: "13911111111",
        code: "246810",
        value: false,
      },
      isLoading: false, //登录的loading
      rules: {
        mobile: [
          { required: true, message: "手机号码必填", trigger: "blur" },
          { min: 11, max: 11, message: "手机号码遵守格式" },
        ],
        code: [{ required: true, message: "验证码必填", trigger: "blur" }],
        value: [
          {
            validator: (rule, value, callback) => {
              if (value) {
                callback();
              } else {
                callback(new Error("请勾选用户协议"));
              }
            },
            trigger: "change",
          },
        ],
      },
    };
  },
  methods: {
    login() {
      this.isLoading = true;

      GetLogin(this.user)
        .then((res) => {
          // console.log(res);
          this.$message({
            message: "登录成功",
            type: "success",
          });
          this.isLoading = false;
          //将接口返回的数据放到本地存储
          window.localStorage.setItem("user", JSON.stringify(res.data.data));
          this.$router.push("/home");
        })
        .catch((err) => {
          console.log(err);
          this.$message.error("手机号或验证码错误");
          this.isLoading = false;
        });
    },
    onLogin() {
      // 表单验证
      this.$refs["form"].validate((valid) => {
        // 如果表单验证失败,停止请求
        if (!valid) {
          return;
        }
        // 验证通过,请求登录
        this.login();
      });
    },
  },
};
</script>

<style scoped>
.login-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("./login-bg.jpg") no-repeat;
  background-size: cover;
}

.title {
  color: #409eff;
  text-align: center;
}

.login-form {
  background-color: #fff;
  border-radius: 2%;
  opacity: 0.7;
  padding: 30px 60px;
  min-width: 300px;
}

.login-btn {
  width: 100%;
}
</style>
